<template>
  <div class="card-title">
    <div class="title-box">
      <span class="title">{{ props.title }}</span>
      <span class="desc"><slot></slot></span>
    </div>
    <el-select v-model="selectData.value" placeholder="请选择" @change="onChangeSelect">
      <el-option v-for="item in selectData.option" :key="item.id" :label="item.label" :value="item.id"> </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { getDay,getRecentMonth } from '@/utils/timeCycle'

  const props = defineProps({
    title: String
  })

  const emit = defineEmits(['change'])

  const selectData = reactive({
    value: 0,
    option: [
      { id: 0, label: '今天' },
      { id: 1, label: '昨天' },
      { id: 2, label: '近一周' },
      { id: 3, label: '近一月' },
      { id: 4, label: '近半年' },
      { id: 5, label: '近一年' }
    ],
    startTime: getDay(0),
    endTime: getDay(0)
  })

  const onChangeSelect = (e: any) => {
    let str='';
    let endStr = ''
    switch(e){
      case 0:
        str = getDay(0)
        endStr = getDay(0)
        break;
       case 1:
        str = getDay(-1)
        endStr = getDay(-1)
        break;
      case 2:  
        str = getDay(-6)
        endStr = getDay(0)
        break;
      case 3:  
        str = getRecentMonth(1)
        endStr = getDay(0)
        break;
      case 4:  
        str = getRecentMonth(6)
        endStr = getDay(0)
        break;
      case 5:  
        str = getRecentMonth(12)
        endStr = getDay(0)
        break;
    }
    selectData.startTime = str + ' ' + '00:00:00'
    selectData.endTime = endStr + ' ' + '23:59:59'
    console.log(selectData.startTime ,'-----------时间范围');
    emit('change', [selectData.startTime, selectData.endTime])
  }

  emit('change', [selectData.startTime+' '+'00:00:00', selectData.endTime+' '+'23:59:59'])
</script>

<style lang="scss" scoped>
  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-box {
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #33302d;
      }

      .desc {
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        :deep .led {
          color: #ff6b00;
        }
      }
    }

    .el-select {
      width: 120px;
    }
  }
</style>
